<template>
  <div class="header-wrapper">
  <div class="header-top">
    <div class="w1190">
      <div class="header-top-text">
        卓一慧众一站式服务平台
        <a-button type="link" @click="$router.push({ name: 'index' })">返回首页</a-button>
      </div>
      <div class="header-top-component">
        <span v-if="token">您好， {{name}} &nbsp; <a @click="logout">退出</a></span>
        <span v-else><router-link :to="{ name: 'Login' }">请登录</router-link></span>
        <a-divider type="vertical" />
        <router-link :to="{ name: 'MemberIndex' }">个人中心</router-link>
        <a-divider type="vertical" />
        咨询热线：<span>400-9932-799</span>
      </div>
    </div>
  </div>
  <div class="header-logo">
    <div class="w1190">
      <div class="logo-img">
        <router-link :to="{ name: 'index' }"><img src="@/assets/images/logo.png"/></router-link>
      </div>
      <div class="header-search">
        <a-form-model
          layout="inline"
        >
          <a-form-model-item style="margin-right:4px">
            <a-input v-model="keyword" size="large" style="width: 400px" placeholder="请输入要搜索的关键词">
              <a-icon slot="prefix" type="search" style="color:rgba(0,0,0,.25)" />
            </a-input>
          </a-form-model-item>
          <a-form-model-item style="margin-right:4px">
            <a-button class="btn-search" size="large" type="primary" @click="onSearch">立即查找</a-button>
          </a-form-model-item>
          <a-form-model-item style="margin-right:0">
            <a-badge :count="cartNum">
              <a-button size="large" icon="shopping-cart" type="danger" ghost @click="$router.push({ name: 'Cart' })">我的购物车</a-button>
            </a-badge>
          </a-form-model-item>
        </a-form-model>
      </div>
    </div>
  </div>
  <div class="header-nav">
    <div class="w1190">
      <!--        <a v-for="item in navList" :key="item.id" @click="$router.push({ name: 'ProductList', params:{ id: item.id } })">{{item.name}}<img src="@/assets/images/icon_hot.png"/></a>-->
      <div class="first" v-for="(item, i) in navList" :key="item.id">
        <a @click="$router.push({ name: 'ProductDefault', params: { id: item.id } })">{{item.name}}<img src="@/assets/images/icon_hot.png"/></a>
        <div class="second">
          <div class="w1190">
            <a v-for="sub in navList[i].data" :key="sub.id" @click="$router.push({ name: 'ProductList', params:{ fid: item.id, id: sub.id } })">{{sub.name}}</a>
          </div>
        </div>
      </div>
      <div class="first">
        <a @click="onSwt">设计服务</a>
        <div class="second">
          <div class="w1190">
            <a @click="onSwt">商标设计</a>
            <a @click="onSwt">VI基础设计</a>
            <a @click="onSwt">平面设计</a>
            <a @click="onSwt">网站设计开发</a>
          </div>
        </div>
      </div>
      <div class="first">
        <a @click="onSwt">国际服务</a>
        <div class="second">
          <div class="w1190">
            <a @click="onSwt">国际商标服务</a>
            <a @click="onSwt">国际专利服务</a>
            <a @click="onSwt">国际公司服务</a>
          </div>
        </div>
      </div>
      <div class="first">
        <a @click="onSwt">企业服务</a>
        <div class="second">
          <div class="w1190">
            <a @click="onSwt">工商财税</a>
            <a @click="onSwt">高新认定</a>
            <a @click="onSwt">知识产权评估</a>
            <a @click="onSwt">资质认证</a>
            <a @click="onSwt">400电话</a>
            <a @click="onSwt">条形码</a>
            <a @click="onSwt">认证咨询</a>
          </div>
        </div>
      </div>
      <div class="first">
        <a @click="onSwt">商标交易</a>
      </div>
      <div class="first">
        <a @click="onSwt">维权保护</a>
      </div>
      <div class="first">
        <a @click="$router.push({ path: '/tui/sbzc' })">商标查询</a>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import store from 'store'
import { getNav } from '@/api/web'
import apis from '@/api'
import { getCartList } from '@/api/cart'

export default {
  name: 'WebHeader',
  data () {
    return {
      token: store.get(ACCESS_TOKEN),
      navList: [],
      keyword: '',
      cartNum: 0
    }
  },
  created () {
    this.getNavList()
    this.getCartNum()
  },
  methods: {
    getCartNum () {
      getCartList().then(res => {
        this.cartNum = res.result.total_count
      })
    },
    logout () {
      this.$store.dispatch('Logout').then(() => {
        window.location.reload()
      })
    },
    getNavList () {
      getNav().then(res => {
        this.navList = res.result.data
      })
    },
    onSwt () {
      window.open(apis.Swt)
    },
    onSearch () {
      if (this.keyword === '') {
        this.$warning({
          title: '务必输入要搜索的关键词'
        })
        return false
      }
      this.$nextTick(() => {
        this.$router.replace({ name: 'Search', query: { keyword: this.keyword } })
      })
    }
  },
  computed: {
    ...mapGetters(['name'])
  }
}
</script>

<style scoped>
.w1190 {
  width: 1190px;
  margin: 0 auto;
}

.header-top {
  height: 36px;
  background: #f5f5f5;
  line-height: 36px;
  font-size: 12px;
}

.header-top .ant-btn {
  font-size: 12px
}

.header-top .header-top-text {
  float: left;
}

.header-top .header-top-component {
  float: right;
}

.header-top .header-top-component a {
  color:#333;
}

/deep/ .header-top .ant-btn {
  color:#666;
}

.header-logo {
  height: 133px;
  background: #fff;
  overflow: hidden;
}

.header-logo .w1190{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header-logo .logo-img{
  float: left;
}

.header-logo .header-search{
  wdith: 650px;
  float: right;
}
.header-nav{background-color: #ffffff;padding-bottom: 12px;position: relative;}
.header-nav .w1190{display: flex;align-items: center;justify-content: space-between;}
.header-nav .first:hover .second{display: flex;}
.header-nav .first>a{font-size: 16px;color: #666666;cursor: pointer;display: flex;align-items: flex-start;line-height: 40px;}
.header-nav .first:hover>a{color: #ff2f32;font-weight: 700;}
.header-nav .first .second{position: absolute;background-color: #ffffff;z-index: 1;width: 100%;left: 0;top: 40px;display: none;}
.header-nav .first .second .w1190{display: flex;align-items: center;justify-content: flex-start;}
.header-nav .first .second a{font-size: 14px;background: url("../../assets/images/icon_divide.png")no-repeat left center;padding: 0 25px 0 38px;color: #666666;line-height: 38px;}
.header-nav .first .second a:first-child{background: none;padding-left: 0;}
.header-nav .first .second a:hover{color: #ff2f32;}
.header-nav a img{margin-left: 4px;}

.btn-search { background: #000; border: 1px solid #000; }
</style>
